
let currentPage = 0;


function renderTable() {
    const tableBody = document.getElementById("tbody")
    const params = new URLSearchParams({ page: currentPage });
    fetch(`http://localhost:7777/userList?${params}`)
        .then(response => response.json())
        .then(data => {
            tableBody.innerHTML = '';
            data.content.forEach(element => {
                tableBody.appendChild(makeRowwithUserInfo(element))
            })
        })
}

function makeRowwithUserInfo(element) {
    const row = document.createElement('tr')
    row.innerHTML = `
            <td>${element.username}</td>
            <td>${element.nickname}</td>
            <td>${element.telphoneNumber}</td>
            <td>${element.email}</td>
            <td>${element.department}</td>
            <td>${element.role}</td>
            <td>${element.state}</td>
    `

    const operationTd = document.createElement('td')
    const editButton = document.createElement('button')
    editButton.textContent = "编辑"
    editButton.className = 'edit-button'
    editButton.useriD = element.id
    operationTd.appendChild(editButton)

    const deleteButton = document.createElement('button')
    deleteButton.textContent = "删除"
    deleteButton.useriD = element.id
    deleteButton.className = 'delete-button'
    operationTd.appendChild(deleteButton)

    row.appendChild(operationTd)
    return row
}

function updateCurrentPageLabel() {
    currentPageLabel.innerText = currentPage;
    presPageButton.disabled = currentPage == 0
    nextPageButton.disabled = currentPage > 9
    renderTable()

}

// 这里无法直接获取 document.getElementById 获取FOOTER中的元素 ，于是选择多走一步 ，先获取FOOTER在获取其中的元素
const footer = document.getElementsByTagName('footer')[0];
const presPageButton = footer.querySelector("#presPageButton");
const nextPageButton = footer.querySelector("#nextPageButton");
const currentPageLabel = footer.querySelector("#currentPageLabel");
presPageButton.addEventListener('click', function () {
    currentPage -= 1;
    updateCurrentPageLabel()


})

nextPageButton.addEventListener('click', function () {
    currentPage += 1;
    updateCurrentPageLabel()


})

var button = document.getElementById("mybutton");
button.addEventListener("click", function () {
    renderTable();
});

updateCurrentPageLabel()

const table = document.getElementsByTagName('table')[0];

table.addEventListener('click', (event) => {
    console.log(event)
    console.log(event.target.id)
    if (event.target.className == "edit-button") {
        console.log("***************")
        console.log(event.target.useriD)
    } else if(event.target.className == "delete-button") {
       // console.log("***** delete-button**********")
       const uri = 'http://localhost:7777/user/delete'
       const data = {id: event.target.useriD}
       fetch( uri, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
       }
       )
       .then(response => {
        if(response.status == 200) {
            alert("数据删除成功")
            renderTable()
        }
       })
    }
})






